<template>
  <div class="phone_number_place-wrapper">
    <Navbar title="选择手机号归属地" bgColor="#fff"/>
    <div>
      <van-index-bar :index-list="indexList" >
        <template v-for="item in phoneNumberPlaceList" :key="item.index">
          <van-index-anchor :index="item.index" />
          <van-cell-group inset>
          <template v-for="item2 in item.list" :key="item2.country">
            
            <van-cell :title="item2.country" :value="item2.code"/>

          </template>
          </van-cell-group>
        </template>
      </van-index-bar>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import Navbar from '@/components/Navbar.vue'

const indexList = [
  "热门",
  "A",
  // , "B", "C", "D", "E", "F", "G", "H"
];
const phoneNumberPlaceList = reactive([
  {
    index: "热门",
    list: [
      { country: "中国", code: "+86" },
      { country: "香港(中国)", code: "+852" },
      { country: "澳门(中国)", code: "+853" },
      { country: "台湾(中国)", code: "+886" },
      { country: "新加坡", code: "+65" },
      { country: "澳大利亚", code: "+61" },
      { country: "新西兰", code: "+64" },
      { country: "日本", code: "+81" },
      { country: "韩国", code: "+82" },
    ],
  },
  {
    index: "A",
    list: [
      { country: "阿尔巴尼亚", code: "+355" },
      { country: "阿尔及利亚", code: "+213" },
      { country: "阿富汗", code: "+93" },
      { country: "阿根廷", code: "+54" },
      { country: "爱尔兰(岛)", code: "+353" },
      { country: "埃及", code: "+20" },
      { country: "埃塞俄比亚", code: "+251" },
      { country: "爱沙尼亚", code: "+372" },
      { country: "阿联酋", code: "+971" },
      { country: "阿鲁巴", code: "+297" },
      { country: "阿曼", code: "+968" },
      { country: "安道尔共和国", code: "+376" },
      { country: "安哥拉", code: "+244" },
      { country: "安圭拉岛", code: "+1264" },
      { country: "安提瓜及巴布达", code: "+268" },
      { country: "奥地利", code: "+43" },
      { country: "阿塞拜疆", code: "+994" },
      { country: "阿根延", code: "+54" },
      { country: "阿拉伯联合酋长国", code: "+972" },
      { country: "阿拉伯也门共和国", code: "+968" },
      { country: "阿拉斯加", code: "+1907" },
      { country: "阿鲁巴岛", code: "+297" },
      { country: "阿森松", code: "+247" },
      { country: "爱尔兰", code: "+353" },
      { country: "安道尔", code: "+33628" },
      { country: "安提瓜和巴布达", code: "+1809" },
    ],
  },
]);
</script>

<style>
</style>